<template>
    <div>
        <mj-title type="h2" title="LoadingBar 加载进度条"></mj-title>
        <div class="page-desc">全局创建一个显示页面加载、异步请求、文件上传等的加载进度条。</div>

        <mj-title type="h2" title="说明"></mj-title>
        <div class="page-desc">LoadingBar 只会在全局创建一个，因此在任何位置调用的方法都会控制这同一个组件。
            主要使用场景是路由切换和Ajax，因为这两者都不能拿到精确的进度，LoadingBar会模拟进度，当然也可以通过update()方法来传入一个精确的进度</div>

        <mj-title type="h2" title="在异步中使用"></mj-title>

        <div class="input">
            <pre>
                <code class="language-html line-num bers">
                    &lt;script>
                    // 以jQuery的Ajax为例，部分代码省略
                    import $ from 'jquery';
                    export default {
                        methods: {
                            getData () {
                                this.$LoadingBar.start();
                                $.ajax({
                                    url: '/api/someurl',
                                    type: 'get',
                                    success: () => {
                                        this.$LoadingBar.finish();
                                    }
                                    error: () => {
                                        this.$LoadingBar.error();
                                    }
                                });
                            }
                        }
                    }
                    &lt;/script>
                </code>
            </pre>
        </div>

        <mj-title type="h2" title="基本用法"></mj-title>
        <div class="page-desc">点击 开始 开始进度，点击 完成 结束。在调用start()方法后，组件会自动模拟进度，当调用finish()或error()时，补全进度并自动消失。</div>
        <div class="input">
            <mj-Button type="primary" @click="start">开始</mj-Button>
            <mj-Button type="success" @click="finish">完成</mj-Button>
            <mj-Button type="error" @click="error">错误</mj-Button>
            <pre>
                <code class="language-html line-num bers">
                    &lt;mj-Button type="primary" @click="start">开始&lt;/mj-Button>
                    &lt;mj-Button type="success" @click="finish">结束&lt;/mj-Button>
                    &lt;mj-Button type="error" @click="error">错误&lt;/mj-Button>
                    &lt;script>
                    export default {
                        methods: {
                            start () {
                                this.$LoadingBar.start();
                            },
                            finish () {
                                this.$LoadingBar.finish();
                            },
                            error () {
                                this.$LoadingBar.error();
                            }
                        }
                    }
                    &lt;/script>
                </code>
            </pre>
        </div>

        <mj-title type="h5" title="API"></mj-title>
        <div class="page-desc">可以通过直接调用以下方法来使用组件</div>
        <div class="input">
            <pre>
                <code class="language-html line-num bers">
                    this.$LoadingBar.start() //开始
                    this.$LoadingBar.finish() //完成
                    this.$LoadingBar.error() //错误
                    this.$LoadingBar.update(percent) //percent 精准的进度
                    //全局配置方法
                    this.$Loading.config({
                        color: '#5cb85c', //颜色
                        failedColor: '#f0ad4e', //失败颜色
                        height: 5 //高度
                    })
                    this.$Loading.destroy() //销毁
                </code>
            </pre>
        </div>
        <mj-title type="h6" title="LoadingBar 参数"></mj-title>
            <table class="api-table">
                <thead>
                    <tr>
                        <th>属性</th>
                        <th>说明</th>
                        <th>类型</th>
                        <th>默认值</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>color</td>
                        <td>进度条的颜色，默认为#2d8cf0</td>
                        <td>String</td>
                        <td>primary</td>
                    </tr>
                    <tr>
                        <td>failedColor</td>
                        <td>失败时的进度条颜色,默认为#ed4014</td>
                        <td>String</td>
                        <td>error</td>
                    </tr>
                    <tr>
                        <td>height</td>
                        <td>进度条高度，单位px</td>
                        <td>Number</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>duration </td>
                        <td>隐藏时的持续时间，单位ms</td>
                        <td>Number</td>
                        <td>800</td>
                    </tr>
                </tbody>
            </table>
            <mj-title type="h6" title="LoadingBar 事件"></mj-title>
            <table class="api-table">
                <thead>
                    <tr>
                        <th>函数名</th>
                        <th>说明</th>
                        <th>参数</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>start</td>
                        <td>开始从0显示进度条，并自动加载进度</td>
                        <td>无</td>
                    </tr>
                    <tr>
                        <td>finish</td>
                        <td>结束进度条，自动补全剩余进度</td>
                        <td>无</td>
                    </tr>
                    <tr>
                        <td>error</td>
                        <td>以错误的类型结束进度条，自动补全剩余进度</td>
                        <td>无</td>
                    </tr>
                    <tr>
                        <td>update</td>
                        <td>精确加载到指定的进度</td>
                        <td>percent，指定的进度百分比</td>
                    </tr>
                    <tr>
                        <td>destroy</td>
                        <td>销毁进度条</td>
                        <td>无</td>
                    </tr>
                </tbody>
            </table>
    </div>
</template>
<script>
export default {
    data() {
        return {

        }
    },
    methods: {
        start() {
            this.$LoadingBar.start();
        },
        finish() {
            this.$LoadingBar.finish();
        },
        error() {
            this.$LoadingBar.error();
        }
    },
}
</script>